<template>
  <div class="divWarehouse">
    <div class="divHead box">
      <div class="serchForm">
        <el-row :gutter="30">
          <el-col :span="8">
            <div class="divLable">库区名称</div>
            <el-input
              v-model="searchParams.areaName"
              placeholder="请输入"
              maxlength="10"
              @input="resetPageIndex"
            />
          </el-col>
          <el-col :span="8">
            <div class="divLable">库位名称</div>
            <el-input
              v-model="searchParams.name"
              placeholder="请输入"
              maxlength="10"
              @input="resetPageIndex"
            />
          </el-col>
          <el-col :span="8">
            <div class="divLable">库位状态</div>
            <el-select
              v-model="searchParams.status"
              clearable
              placeholder="请选择"
              @change="resetPageIndex"
            >
              <el-option
                v-for="item in statusSelectOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-col>
        </el-row>
      </div>
      <div class="textRight">
        <base-button
          class="minorImportantButton btnSearch"
          @click="btnSearchClick"
        >搜索</base-button>
        <base-button
          class="unimportanceButton"
          @click="btnResetClick"
        >重置</base-button>
      </div>
    </div>
    <div class="divContent box">
      <div class="tableInfo">
        <base-button
          class="importantButton"
          @click="btnAddClick"
        >新增库位</base-button>
        <div class="textRight">
          <base-button
            class="unimportanceButton"
            @click="btnDownLoadClick"
          >下载库位模版</base-button>
          <base-button
            class="unimportanceButton"
            @click="btnImportClick"
          >导入库位信息</base-button>
        </div>
      </div>
      <div v-if="tableData.length>0">
        <el-table
          :data="tableData"
          stripe
          border
          style="width: 100%"
          v-loading="loading"
          :header-cell-style="{ background: '#f9f6ee' }"
        >
          <el-table-column
            type="index"
            align="center"
            width="68"
          />
          <el-table-column
            prop="warehouseName"
            align="center"
            label="所属仓库"
            width="160"
          />
          <el-table-column
            prop="areaCode"
            align="center"
            label="库区编号"
            width="150"
          />
          <el-table-column
            prop="areaName"
            align="center"
            label="库区名称"
            width="160"
          />
          <el-table-column
            prop="code"
            align="center"
            label="库位编号"
            width="160"
          />
          <el-table-column
            prop="name"
            align="center"
            label="库位名称"
            width="160"
          />
          <el-table-column
            prop="temperatureType"
            align="center"
            label="温度类型"
            width="160"
          >
            <template slot-scope="{row}">
              <span v-if="row.temperatureType === 'CW'">常温</span>
              <span v-if="row.temperatureType === 'LC'">冷藏</span>
              <span v-if="row.temperatureType === 'HW'">恒温</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="bearingType"
            align="center"
            label="承重类型"
            width="160"
          >
            <template slot-scope="{row}">
              <span v-if="row.bearingType === 'ZX'">重型</span>
              <span v-if="row.bearingType === 'QX'">轻型</span>
              <span v-if="row.bearingType === 'BX'">中型</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="useType"
            align="center"
            label="用途属性"
            width="160"
          >
            <template slot-scope="{row}">
              <span v-if="row.useType === 'RKHCQ'">入库缓存区</span>
              <span v-if="row.useType === 'CKHCQ'">出库缓存区</span>
              <span v-if="row.useType === 'CCQ'">存储区</span>
              <span v-if="row.useType === 'FJQ'">分拣区</span>
              <span v-if="row.useType === 'ZJQ'">质检区</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="status"
            align="center"
            label="停用状态"
            width="160"
          >
            <template slot-scope="{row}">
              <span v-if="row.status === 0">停用</span>
              <span v-if="row.status === 1">启用</span>
            </template>
          </el-table-column>
          <!-- <el-table-column
            prop="useStatus"
            align="center"
            label="使用状态"
            width="150"
          >
            <template slot-scope="{row}">
              <span v-if="row.useStatus === 0">空闲</span>
              <span v-if="row.useStatus === 1">占用</span>
            </template>
          </el-table-column> -->
          <el-table-column
            prop="maxNum"
            align="center"
            label="承载上限"
            width="160"
          />
          <el-table-column
            prop="updateTime"
            align="center"
            label="更新时间"
            width="200"
          />
          <el-table-column
            label="操作"
            align="center"
            width="180"
            fixed="right"
          >
            <template slot-scope="{row}">
              <base-button
                class="fontOperateButton"
                @click="editClick(row.id)"
              >编辑</base-button>
              <base-button
                class="fontOperateButton"
                v-if="row.status ===1"
                @click="statusChangeClick(row.status,row.id,row.name)"
              >停用</base-button>
              <base-button
                class="fontOperateButton"
                v-else
                @click="statusChangeClick(row.status,row.id,row.name)"
              >启用</base-button>
              <base-button
                class="fontOperateButton"
                @click="deleteClick(row.id,row.name)"
              >删除</base-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
      <base-pagination :total="paging.total" :limit="paging.size" @current-change="handleCurrentChange"  @size-change="handleSizeChange"></base-pagination>
      </div>
      <div
        v-else
        class="emptyTip"
      >
        <span class="imgIcon"></span>
        <p>暂无库位</p>
      </div>
      <upload-file
        ref="fileDialog"
        :dialogData="dialogFileImportData"
        @handleclose="handleClose"
      ></upload-file>
      <el-dialog
        :title="dialogData.dialogTitle"
        :visible.sync="dialogData.visible"
        width="30%"
      >
        <span>{{dialogData.msg}}</span>
        <span
          slot="footer"
          class="dialog-footer"
        >
          <base-button
            class="unimportanceButton btnCancle"
            @click="dialogData.visible = false"
          >取 消</base-button>
          <base-button :class="dialogData.dialogTitle.indexOf('删除') > -1 ? 'errorButton' : 'minorImportantButton' "
            type="primary"
            @click="dialogSure"
          >确 定</base-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Watch } from 'vue-property-decorator'
import BaseButton from '@/components/base-button/index.vue'
import UploadFile from '@/components/UploadFile/index.vue'
import { ILocationTableData } from '@/module-base/interface/location'
import BasePagination from '@/components/base-pagination/index.vue'
import {
  getLocationPaging,
  changeLocationStatus,
  deleteLocation
} from '@/module-base/api/location'
import { warehouseStatusSelectOptions } from '@/utils/common-select-data'
import { ICommonReturn, ICommonSelectOptions } from '@/utils/common-interface'
import { mixins } from 'vue-class-component'
import SinglePage from '@/mixin/single-page'

@Component({
  name: 'Warehouse',
  components: {
    BaseButton,
    BasePagination,
    UploadFile
  }
})
export default class extends mixins(SinglePage) {
  private tableData: ILocationTableData[] = []
  private statusSelectOptions: ICommonSelectOptions[] = []
  private loading = false
  private searchParams = {
    areaName: '',
    name: '',
    status: undefined
  }

  private dialogData = {
    id: '',
    msg: '',
    status: -1,
    dialogTitle: '',
    visible: false
  }

  private dialogFileImportData = {
    updatedTitle: '库位',
    isFileVisible: false,
    uploadUrl: '/api/location/upload'
  }

  private paging = {
    current: 1, // 当前页码
    size: 10, // 每页数据量
    total: 0
  }

  @Watch('$route', { immediate: true })
  private onRouteChange() {
    this.getList()
  }

  mounted() {
    this.statusSelectOptions = warehouseStatusSelectOptions
  }

  private btnSearchClick() {
    this.getList()
  }

  private btnResetClick() {
    this.searchParams = {
      areaName: '',
      name: '',
      status: undefined
    }
    this.resetPageIndex()
    this.getList()
  }

  private btnAddClick() {
    this.$router.push({ path: 'location/details/null' })
  }

  private btnDownLoadClick() {
    window.location.href = '../../template/locationTemplate.xlsx'
  }

  private btnImportClick() {
    this.dialogFileImportData.isFileVisible = true
  }

  private handleClose() {
    this.dialogFileImportData.isFileVisible = false
  }

  private getParams() {
    const current = this.paging.current
    const size = this.paging.size
    const params = {
      ...this.searchParams,
      current,
      size
    }
    if (params.status === -1) {
      delete params.status
    }
    return params
  }

  private async getList() {
    this.loading = true
    const params = this.getParams()
    const { data } = await getLocationPaging(params)
    this.loading = false
    this.tableData = data.records
    this.paging.total = parseInt(data.total, 10)
  }

  private editClick(id: string) {
    this.$router.push({ path: `location/details/${id}` })
  }

  private deleteClick(id: string, name: string) {
    if (this.confirmMsg()) {
      return
    }
    this.dialogData.msg = `确定要删除库位名为：${name} 的库位吗？`
    this.dialogData.id = id
    this.dialogData.visible = true
    this.dialogData.dialogTitle = '确认删除'
  }

  private async deleteSure() {
    const params = {
      ids: [this.dialogData.id]
    }
    const data = ((await deleteLocation(params)) as unknown) as ICommonReturn
    if (data.code === 0) {
      this.$message({
        showClose: true,
        message: '数据删除成功',
        type: 'success'
      })
      this.dialogData.visible = false
      this.getList()
    } else {
      this.$message({
        showClose: true,
        message: data.msg,
        type: 'error'
      })
    }
  }

  private dialogSure() {
    if (this.dialogData.msg.indexOf('删除') > 0) {
      this.deleteSure()
    } else {
      this.statusChangeSure()
    }
  }

  private statusChangeClick(status: number, id: string, name: string) {
    const type = status === 0 ? '启用' : '停用'
    this.dialogData = {
      msg: `确定要${type}：${name} 吗？`,
      id: id,
      status: status === 0 ? 1 : 0,
      visible: true,
      dialogTitle: `确认${type}`
    }
  }

  private async statusChangeSure() {
    const params = {
      id: this.dialogData.id,
      status: this.dialogData.status
    }
    const data = ((await changeLocationStatus(
      params
    )) as unknown) as ICommonReturn
    if (data.code === 0) {
      this.$message({
        showClose: true,
        message: '状态改变成功',
        type: 'success'
      })
      this.dialogData.visible = false
      this.getList()
    } else {
      this.$message({
        showClose: true,
        message: data.msg,
        type: 'error'
      })
    }
  }

  private handleCurrentChange(page: number) {
    this.paging.current = page
    this.getList()
  }

  private handleSizeChange(page: number) {
    this.paging.size = page
    this.resetPageIndex()
    this.getList()
  }

  private resetPageIndex() {
    this.paging.current = 1
  }
}
</script>
<style lang="scss" scoped>
@import './index.scss';
</style>
